<nz-row [nzGutter]="16" class="mt-3 justify-content-between">
  <nz-col [nzSpan]="6">
    <nz-card class="h-100">
      <nz-skeleton [nzLoading]="loading" [nzActive]="true" [nzTitle]="false" [nzParagraph]="{ rows: 2 }"
                   [nzAvatar]="{ size: 'large', shape: 'square' }"></nz-skeleton>
      <nz-row *ngIf="!loading" [nzGutter]="16">
        <nz-col [nzSpan]="6" class="d-flex justify-content-center align-items-center">
          <div class="icon-img-holder">
            <img src="/assets/images/insights-check.png" class="img-fluid" alt="">
          </div>
        </nz-col>
        <nz-col [nzSpan]="18">
          <h5 class="m-0 fw-normal" nz-typography>Completed tasks</h5>
          <h2 class="m-0" nz-typography>{{overviewData.completed_tasks_count || 0}}</h2>
        </nz-col>
      </nz-row>
    </nz-card>
  </nz-col>
  <nz-col [nzSpan]="6">
    <nz-card class="h-100">
      <nz-skeleton [nzLoading]="loading" [nzActive]="true" [nzTitle]="false" [nzParagraph]="{ rows: 2 }"
                   [nzAvatar]="{ size: 'large', shape: 'square' }"></nz-skeleton>
      <nz-row *ngIf="!loading" [nzGutter]="16">
        <nz-col [nzSpan]="6" class="d-flex justify-content-center align-items-center">
          <div class="icon-img-holder">
            <img src="/assets/images/clipboard.png" class="img-fluid" alt="">
          </div>
        </nz-col>
        <nz-col [nzSpan]="18">
          <h5 class="m-0 fw-normal" nz-typography>Incomplete tasks</h5>
          <h2 class="m-0" nz-typography>{{overviewData.todo_tasks_count || 0}}</h2>
        </nz-col>
      </nz-row>
    </nz-card>
  </nz-col>
  <nz-col [nzSpan]="6">
    <nz-card class="h-100">
      <nz-skeleton [nzLoading]="loading" [nzActive]="true" [nzTitle]="false" [nzParagraph]="{ rows: 2 }"
                   [nzAvatar]="{ size: 'large', shape: 'square' }"></nz-skeleton>
      <nz-row *ngIf="!loading" [nzGutter]="16">
        <nz-col [nzSpan]="6" class="d-flex justify-content-center align-items-center">
          <div class="icon-img-holder">
            <img src="/assets/images/warning.png" class="img-fluid" alt="">
          </div>
        </nz-col>
        <nz-col [nzSpan]="18">
          <h5 class="m-0 fw-normal" nz-typography>Overdue tasks
            <span nz-icon nzType="info-circle" nzTheme="outline" [nz-tooltip]="'true'"
                  [nzTooltipTitle]="'Tasks that are past their due date'"
                  style="color: #3587ff; font-size: 14px;"></span></h5>
          <h2 class="m-0" nz-typography>{{overviewData.overdue_count || 0}}</h2>
        </nz-col>
      </nz-row>
    </nz-card>
  </nz-col>
  <nz-col [nzSpan]="6">
    <nz-card class="h-100">
      <nz-skeleton [nzLoading]="loading" [nzActive]="true" [nzTitle]="false" [nzParagraph]="{ rows: 2 }"
                   [nzAvatar]="{ size: 'large', shape: 'square' }"></nz-skeleton>
      <nz-row *ngIf="!loading" [nzGutter]="16">
        <nz-col [nzSpan]="6" class="d-flex justify-content-center align-items-center">
          <div class="icon-img-holder">
            <img src="/assets/images/clock-red.png" class="img-fluid" alt=""
                 *ngIf="checkOverLoggedOrNot(overviewData)">
            <img src="/assets/images/clock-green.png" class="img-fluid" alt=""
                 *ngIf="!checkOverLoggedOrNot(overviewData)">
          </div>
        </nz-col>
        <nz-col [nzSpan]="18">
          <h5 class="m-0 fw-normal" nz-typography>{{checkOverLoggedOrNot(overviewData) ? 'Over' : 'Under'}} logged hours
            <span nz-icon nzType="info-circle" nzTheme="outline" [nz-tooltip]="'true'"
                  [nzTooltipTitle]="'Difference between task estimation and logged time for tasks.'"
                  style="color: #3587ff; font-size: 14px;"></span>
          </h5>
          <h2 class="m-0" nz-typography [nz-tooltip]="'true'" [nzTooltipPlacement]="'top'"
              [nzTooltipTitle]="contentTemplate">
            {{checkOverLoggedOrNot(overviewData) ? '(' + (overviewData.overlogged_hours || 0) + ')' : overviewData.overlogged_hours}}
          </h2>
          <ng-template #contentTemplate>
            <table>
              <tr>
                <td>Total Estimation:</td>
                <td>&nbsp; {{overviewData.total_estimated_hours_string || 'Oh 0m'}}</td>
              </tr>
              <tr>
                <td>Total Logged Hours:</td>
                <td>&nbsp; {{overviewData.total_logged_hours_string || 'Oh 0m'}}</td>
              </tr>
            </table>
          </ng-template>
        </nz-col>
      </nz-row>
    </nz-card>
  </nz-col>
</nz-row>
